<template>
  <h2>Guide 开发指南</h2>
  <p>主题色</p>
  <div class="color-container">
    <div class="color-square color-primary" @click="copyColorRbg('#409eff')">
      <div class="color-describe">primary</div>
      <div class="color-rgb">#409eff</div>
    </div>
    <div class="color-square color-success" @click="copyColorRbg('#67c23a')">
      <div class="color-describe">success</div>
      <div class="color-rgb">#67c23a</div>
    </div>
    <div class="color-square color-danger" @click="copyColorRbg('#f56c6c')">
      <div class="color-describe">danger</div>
      <div class="color-rgb">#f56c6c</div>
    </div>
    <div class="color-square color-warning" @click="copyColorRbg('#e6a23c')">
      <div class="color-describe">warning</div>
      <div class="color-rgb">#e6a23c</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@azur-ui/components/src/message'
const copyColorRbg = (rgb: string) => {
  // 复制到剪切板
  navigator.clipboard.writeText(rgb)
  Message({ message: `已复制到剪切板，${rgb}`, type: 'success' })
}
</script>

<style lang="less" scoped>
:root {
  --az-color-primary: #409eff;
  --az-color-success: #67c23a;
  --az-color-danger: #f56c6c;
  --az-color-warning: #e6a23c;
}

.color-container {
  display: flex;

  .color-square {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border-radius: 4px;
    cursor: pointer;

    div {
      color: #fff;
    }

    .color-rgb {
      font-size: 12px;
    }
  }

  .color-primary {
    width: 100px;
    height: 100px;
    background-color: var(--az-color-primary);
  }

  .color-success {
    width: 100px;
    height: 100px;
    background-color: var(--az-color-success);
  }

  .color-danger {
    width: 100px;
    height: 100px;
    background-color: var(--az-color-danger);
  }

  .color-warning {
    width: 100px;
    height: 100px;
    background-color: var(--az-color-warning);
  }
}
</style>
